<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title id="PageTitle"></title>
    <script>
      var width = document.documentElement.clientWidth;
      var scale = width / 375;
      var css = 'html{font-size:' +
        37.5 * scale +
        'px;}';
      document.write('<style>' + css + '</style>');
    </script>
    <script src="//cdn.bootcss.com/eruda/1.2.6/eruda.min.js"></script>
    <script>eruda.init();</script>
    <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <music :music="BgMusic"></music>
    <func-banner :mananger='true'></func-banner>
    <div class="container">
        <header>
            <div class="banner_img">
                <img class="bg_title_banner" :src="BannerStr">
            </div>
            <div class="both"></div>
            <div class="activity_slogan">
                <div class="both"></div>
                <h1 id="title">{{Title}}</h1>
            </div>
            <div class="cut_price_msg">
                <p></p>
            </div>
        </header>
        <main>
            <div class="w">

                <div class="activity_countdown">
                    <p v-if="partinstatus != partinstatusall.AtActInActiveEnd">活动时间结束倒计时:
                        <span class="dynamic_time"><span>{{countDown.days}}</span>天<span>{{countDown.hours}}</span>时<span>{{countDown.minutes}}</span>分<span>{{countDown.seconds}}</span>秒</span>
                    </p>
                    <p v-if="partinstatus == partinstatusall.AtActInActiveEnd">活动已结束</p>
                </div>

                <div class="join_activity">
                    <!-- 活动进度 -->
                    <div class="activity_schedule">
                        <div class="schedule_status" style="width: 80%;"></div>
                        <div class="running_man" style="left: 15%;"><img
                                src="/img/activity/group_buy/million_buy/element_runner.gif" alt=""></div>
                    </div>

                    <div class="activity_status" v-if="partinstatus == partinstatusall.AtActInActiveStart">
                        <div class="look_for_friend">
                            活动还未开始,请收藏
                        </div>
                    </div>

                    <div v-if="partinstatus == partinstatusall.AtActInActiveEnd">
                        <p class="activity_schedule_word">目前接龙人数为<span>{{Joiners}}</span>人,每人价格为<span>{{NowPrice}}</span></p>
                        <div class="activity_status">
                            <div class="look_for_friend">活动已结束</div>
                        </div>
                    </div>

                    <div v-if="partinstatus == partinstatusall.NotJoin">
                        <p class="activity_schedule_word">当前还未开始接龙,快成为第<span>1</span>个吧!</p>
                        <div class="activity_status">
                            <div class="first_want_join join" v-on:click="AlertJoinPop">我要参加</div>
                        </div>
                    </div>

                    <div v-if="partinstatus == partinstatusall.JoinDone">
                        <p class="activity_schedule_word">恭喜你已成功参加接龙,目前接龙人数为<span>{{Joiners}}</span>人,每人价格为<span>{{NowPrice}}</span>,赶快分享好友加入接龙,人越多价越低快来参加接龙吧!
                        </p>
                        <div class="activity_status">
                            <div class="look_for_friend" v-on:click="SendFriend">分享给好友参加接龙</div>
                        </div>
                    </div>


                    <div v-if="partinstatus == partinstatusall.JoinJustNow">
                        <p class="activity_schedule_word">当前已接龙<span>{{Joiners}}</span>人,快来参加接龙吧!</p>
                        <div class="activity_status">
                            <div class="first_want_join join" v-on:click="AlertJoinPop">我要参加</div>
                        </div>
                    </div>
                    <div v-if="partinstatus == partinstatusall.ParterDone">
                        <p class="activity_schedule_word">当前已接龙<span>{{Joiners}}</span>人,快来参加接龙吧!</p>
                        <div class="activity_status">
                            <div class="first_want_join join" v-on:click="BackMine">返回我的</div>
                        </div>
                    </div>

                    <p class="activity_status_word">接龙定金需要{{Prizes.BeforePrice}}元,联系商家取消报名定金全额退回</p>
                    <div class="group_buy_setting">
                        <div class="group_buy_setting_detail" v-for="item in Prizes.LadderArr"
                             v-if="item.PeoNum <= Joiners">
                            <div>
                                <img src="/img/activity/group_buy/million_buy/element_unlock_orange.png" alt="">
                            </div>
                            <div class="ladder-desc">
                                <p>接龙人数已达到{{item.PeoNum}}人,价格为{{item.Price}}元每人</p>
                                <p v-if="item.AddMsg">附赠:<span>{{item.AddMsg}}</span></p>
                            </div>
                        </div>
                        <!-- 未解锁 -->
                        <div class="group_buy_setting_detail" v-else>
                            <div class="price_lock">
                                <img src="/img/activity/group_buy/million_buy/element_lock_orange.png" alt="">
                                <div>未解锁</div>
                            </div>
                            <div class="ladder-desc">
                                <p>接龙人数到达{{item.PeoNum}}人,价格为{{item.Price}}元每人</p>
                                <p v-if="item.AddMsg">附赠:<span>{{item.AddMsg}}</span></p>
                            </div>
                            <div class="lock_mask"></div>
                        </div>
                    </div>
                </div>

                <read-section v-on:child-say="getReadSection" :sedata="Content"></read-section>

                <div class="activity_des" id="rank">
                    <div class="activity_des_title">
                        <h2>排行榜</h2>
                    </div>
                    <div class="activity_des_content">
                        <div class="phb">
                            <div class="bmb">
                                <table>
                                    <tr>
                                        <th>排名</th>
                                        <th>姓名</th>
                                        <th>参加时间</th>
                                    </tr>
                                    <tr v-for="(item ,index) in JoinerRank">
                                        <td>{{index + 1}}</td>
                                        <td>{{item.Name}}</td>
                                        <td>{{item.JoinTime}}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                    </div>
                    <div class="load">数据加载中,请稍后</div>
                </div>

                <div class="both"></div>
                <div class="both"></div>
                <div class="both"></div>
            </div>

        </main>

    </div>


    <div class="both"></div>
    <div class="both"></div>
    <div class="both"></div>


    <!--  报名弹窗-->
    <user-join :othermsg="Other" v-on:join="UserJoinAct" v-on:back="BackMine"></user-join>

    <!-- 报名成功以及提示商家分享方法 -->

    <notice-pop :actstatus="ActStatus"></notice-pop>

    <!-- 分享标题以及副标题处弹窗 -->
    <share-pop :sharemsg="ShareMsg"></share-pop>

    <add-msg :mobile="Mobile"></add-msg>
</div>
</body>
</html>